<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="供应商:" prop="requisitionPerson">
        <span style="padding-right:55px;font-size:15px;">{{ Reqion.supplierName }}</span>
      </el-form-item>

      <el-form-item label="联系人:" prop="requisitionPerson">
        <span style="padding-right:55px;font-size:15px;">{{ Reqion.contact }}</span>
      </el-form-item>

      <el-form-item label="地址:" prop="requisitionPerson">
        <span style="padding-right:55px;font-size:15px;">{{ Reqion.supplierAddress }}</span>
      </el-form-item>

      <el-form-item label="联系电话" prop="requisitionPerson">
        <span style="padding-right:55px;font-size:15px;">{{ Reqion.supplierPhone }}</span>
      </el-form-item>

    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['suppliertable:suppliertable:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['suppliertable:suppliertable:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['suppliertable:suppliertable:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['suppliertable:suppliertable:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="suppliertableList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="商品图片" align="center" prop="supplierImage" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.supplierImage" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="supplierTableName"  width="500px" />

      <el-table-column label="成分及含量" align="center" prop="supplierTableIngredients" />
      <el-table-column label="品种" align="center" prop="supplierTableVariety" />
      <el-table-column label="商品品牌" align="center" prop="supplierTableBrand" />
      <el-table-column label="适应季节" align="center" prop="supplierTableSeason" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">

          <el-button size="mini" type="warning" icon="el-icon-s-goods" @click="handleGoods(scope.row)"
            v-hasPermi="['supplier:supplier:list']">选择商品</el-button>

          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['suppliertable:suppliertable:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['suppliertable:suppliertable:remove']">删除</el-button>


        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

        <!-- 下单操作 -->
    <el-dialog :title="title" :visible.sync="openGoods" width="960px" append-to-body>
        <el-form :model="queryParam" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="商品" prop="supplierTableId" hidden>
        <el-input v-model="queryParam.supplierTableId" placeholder="请输入商品" clearable 
          @keyup.enter.native="handleQuery"  readonly/>
      </el-form-item>
      -->
                
    </el-form>
    
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleGoodsAdd"
          v-hasPermi="['suppliergoods:suppliergoods:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleGoodsUpdate"
          v-hasPermi="['suppliergoods:suppliergoods:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleGoodsDelete"
          v-hasPermi="['suppliergoods:suppliergoods:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleGoodsExport"
          v-hasPermi="['suppliergoods:suppliergoods:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
      <el-table v-loading="loading" :data="tableList" @selection-change="handleGoodsChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="规格型号" align="center" prop="supplierGoodsImage" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.supplierGoodsImage" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="规格型号" align="center" prop="supplierGoodsName" />
        
        <el-table-column label="克重" align="center" prop="supplierGoodsWeight" />
        <el-table-column label="纱支" align="center" prop="supplierGoodsSaori" />
        <el-table-column label="颜色" align="center" prop="supplierGoodsColor" />
        <el-table-column label="幅宽" align="center" prop="supplierGoodsWidth" />
        <el-table-column label="印花风格" align="center" prop="supplierGoodsStyle" />
        <el-table-column label="单价" align="center" prop="supplierGoodsPrice" />
        <el-table-column label="库存" align="center" prop="supplierGoodsNum" />
        <el-table-column label="备注" align="center" prop="remark" />
    
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
   
    </el-dialog>


        <!-- 添加选择商品对话框 -->
        <el-dialog :title="title" :visible.sync="openSupGoods" width="500px" append-to-body>
      <el-form ref="formSup" :model="formSup" :rules="rules" label-width="80px">
        <!-- <el-form-item label="商品" prop="supplierTableId">
          <el-input v-model="formSup.supplierTableId" placeholder="请输入商品id" />
        </el-form-item> -->
        <el-form-item label="规格型号" prop="supplierGoodsName">
          <el-input v-model="formSup.supplierGoodsName" placeholder="请输入规格型号" />
        </el-form-item>
        <el-form-item label="图片路径" prop="supplierGoodsImage">
          <image-upload v-model="formSup.supplierGoodsImage" />
        </el-form-item>
        <el-form-item label="克重" prop="supplierGoodsWeight">
          <el-input v-model="formSup.supplierGoodsWeight" placeholder="请输入克重" />
        </el-form-item>
        <el-form-item label="纱支" prop="supplierGoodsSaori">
          <el-input v-model="formSup.supplierGoodsSaori" placeholder="请输入纱支" />
        </el-form-item>
        <el-form-item label="颜色" prop="supplierGoodsColor">
          <el-input v-model="formSup.supplierGoodsColor" placeholder="请输入颜色" />
        </el-form-item>
        <el-form-item label="幅宽" prop="supplierGoodsWidth">
          <el-input v-model="formSup.supplierGoodsWidth" placeholder="请输入幅宽" />
        </el-form-item>
        <el-form-item label="印花风格" prop="supplierGoodsStyle">
          <el-input v-model="formSup.supplierGoodsStyle" placeholder="请输入印花风格" />
        </el-form-item>
        <el-form-item label="单价" prop="supplierGoodsPrice">
          <el-input v-model="formSup.supplierGoodsPrice" placeholder="请输入单价" />
        </el-form-item>
        <el-form-item label="库存" prop="supplierGoodsNum">
          <el-input v-model="formSup.supplierGoodsNum" placeholder="请输入库存" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formSup.remark" placeholder="请输入备注" />
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitGoodsForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    
<!--- -------------------------------------------------------------------------------------------------- -->

    
    <!-- 添加或修改供应商详情表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        
        <el-form-item label="供应商id" prop="supplierId" hidden>
          <el-input v-model="form.supplierId" placeholder="请输入供应商id" />
        </el-form-item>
        <el-form-item label="商品图片" prop="supplierImage">
          <image-upload v-model="form.supplierImage" />
        </el-form-item>
        <el-form-item label="商品名称" prop="supplierTableName">
          <el-input v-model="form.supplierTableName" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="成分及含量" prop="supplierTableIngredients">
          <el-input v-model="form.supplierTableIngredients" placeholder="请输入成分及含量" />
        </el-form-item>
        <el-form-item label="品种" prop="supplierTableVariety">
          <el-input v-model="form.supplierTableVariety" placeholder="请输入品种" />
        </el-form-item>
        <el-form-item label="商品品牌" prop="supplierTableBrand">
          <el-input v-model="form.supplierTableBrand" placeholder="请输入商品品牌" />
        </el-form-item>
        <el-form-item label="适应季节" prop="supplierTableSeason">
          <el-input v-model="form.supplierTableSeason" placeholder="请输入适应季节" />
        </el-form-item>
      </el-form>
     
      <div slot="footer" class="dialog-footer">
        <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleGoodsAdd"
          v-hasPermi="['suppliergoods:suppliergoods:add']">新增规格</el-button>
      </el-col>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
  
<script>
import { listSuppliertable, getSuppliertable, delSuppliertable, addSuppliertable, updateSuppliertable } from "@/api/supplier/suppliertable";
import { getSupplier } from "@/api/supplier/supplier";
import { listSuppliergoods, getSuppliergoods, delSuppliergoods, addSuppliergoods, updateSuppliergoods } from "@/api/supplier/suppliergoods";

export default {
  name: "Suppliertable",
  data() {
    return {
      tableList:[],
      openGoods:false,
      openSupGoods:false,
      Reqion: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 供应商详情表表格数据
      suppliertableList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierId: null,
        supplierOrderNo: null,
        supplierTableName: null,
        supplierTableNum: null,
        supplierTableUnit: null,
        supplierTablePrice: null
      },
      queryParam:{
        supplierTableId:null,
      },
      formSup:{},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.queryParams.supplierId = this.$route.params && this.$route.params.supplierId
    this.getList();
    const supplierId = this.queryParams.supplierId
    this.SupplierList(supplierId);
  },
  methods: {
      /** 查询商品 */
      GoodsList() {
      listSuppliergoods(this.queryParam).then(response => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    
    handleGoods(row){
            this.queryParam.supplierTableId=row.supplierTableId
            this.GoodsList(),
            this.openGoods = true;
            this.title = '审批窗口'
    },
    //根据id获取供应商
    SupplierList(supplierId) {
      getSupplier(supplierId).then(response => {
        this.Reqion = response.data
      })
    },
    /** 查询供应商详情表列表 */
    getList() {
      this.loading = true;
      listSuppliertable(this.queryParams).then(response => {
        this.suppliertableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        supplierTableId: null,
        supplierId: null,
        supplierOrderNo: null,
        supplierTableName: null,
        supplierTableNum: null,
        supplierTableUnit: null,
        supplierTablePrice: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.supplierTableId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 获取当前日期的方法
    getProjectNum() {
      const projectTime = new Date() // 当前中国标准时间
      // const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = 0
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },
    /** 新增按钮操作 */
    handleAdd() {
     
      this.reset();
      this.open = true;
      this.title = "添加供应商详情表";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const supplierTableId = row.supplierTableId || this.ids
      getSuppliertable(supplierTableId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改供应商详情表";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.supplierTableId != null) {
            updateSuppliertable(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.supplierId = this.$route.params && this.$route.params.supplierId
            //  // 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
            //  this.form.supplierOrderNo = this.getProjectNum() + Math.floor(Math.random() * 10)  // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
            addSuppliertable(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const supplierTableIds = row.supplierTableId || this.ids;
      this.$modal.confirm('是否确认删除供应商详情表编号为"' + supplierTableIds + '"的数据项？').then(function () {
        return delSuppliertable(supplierTableIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('suppliertable/suppliertable/export', {
        ...this.queryParams
      }, `suppliertable_${new Date().getTime()}.xlsx`)
    },


    
/**-------------------------------------------选择商品------------------------------------------------------------- */
        /** 新增按钮操作 */
      handleGoodsAdd() {
      this.formSup.supplierTableId=this.queryParam.supplierTableId
      this.reset();
      this.openSupGoods = true;
      this.title = "添加商品详情";
    },

  // 多选框选中数据
  handleGoodsChange(selection) {
      this.ids = selection.map(item => item.supplierGoodsId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
 
    /** 修改按钮操作 */
    handleGoodsUpdate(row) {
      this.reset();
      const supplierGoodsId = row.supplierGoodsId || this.ids
      getSuppliergoods(supplierGoodsId).then(response => {
        this.formSup = response.data;
        this.openSupGoods = true;
        this.title = "修改商品详情";
      });
    },
    /** 提交按钮 */
    submitGoodsForm() {
      this.$refs["formSup"].validate(valid => {
        if (valid) {
          if (this.formSup.supplierGoodsId != null) {
            updateSuppliergoods(this.formSup).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openSupGoods = false;
              this.GoodsList();
            });
          } else {
            addSuppliergoods(this.formSup).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openSupGoods = false;
              this.GoodsList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleGoodsDelete(row) {
      const supplierGoodsIds = row.supplierGoodsId || this.ids;
      this.$modal.confirm('是否确认删除商品详情编号为"' + supplierGoodsIds + '"的数据项？').then(function () {
        return delSuppliergoods(supplierGoodsIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleGoodsExport() {
      this.download('suppliergoods/suppliergoods/export', {
        ...this.queryParams
      }, `suppliergoods_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
  